<template>
	<view class="container">
		<view v-if="loading" class="loading-tip">加载中...</view>
		<view v-else-if="fansList.length === 0" class="empty-tip">还没有粉丝哦~</view>
		<view v-else class="fans-list">
			<view v-for="fan in fansList" :key="fan.userId" class="fan-item" @click="goToUserTasks(fan)">
				<image class="avatar" :src="getAvatar(fan.avatar)" mode="aspectFill"></image>
				<view class="user-info">
					<text class="nickname">{{ fan.nickName }}</text>
					<text class="signature">{{ fan.signature || '这个人很懒，什么都没留下' }}</text>
				</view>
				<button 
					class="follow-btn" 
					:class="{ 'is-mutual': fan.followedByMe }"
					@click.stop="toggleFollow(fan)"
					:disabled="followInProgress.includes(fan.userId)"
				>
					{{ fan.followedByMe ? '互相关注' : '关注' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config/config.js'
	import { toggleFollow } from '@/api/user.js'

	export default {
		data() {
			return {
				fansList: [],
				loading: true,
				followInProgress: []
			};
		},
		onLoad() {
			this.getFansList();
		},
		methods: {
			async getFansList() {
				this.loading = true;
				try {
					const [err, res] = await uni.request({
						url: `${config.baseUrl}${config.apiPrefix}/system/user/fans`,
						method: 'GET',
						header: {
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						}
					});
					if (res && res.statusCode === 200 && res.data.code === 200) {
						this.fansList = res.data.data;
					} else {
						uni.showToast({ title: '加载失败', icon: 'none' });
					}
				} catch (e) {
					uni.showToast({ title: '加载异常', icon: 'none' });
				} finally {
					this.loading = false;
				}
			},
			async toggleFollow(fan) {
				if (this.followInProgress.includes(fan.userId)) return;
				this.followInProgress.push(fan.userId);
				
				try {
					const res = await toggleFollow(fan.userId);
					if (res.code === 200) {
						fan.followedByMe = res.data; // 后端返回最新的关注状态
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else {
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				} catch (e) {
					uni.showToast({ title: '操作失败', icon: 'none' });
				} finally {
					const index = this.followInProgress.indexOf(fan.userId);
					if (index > -1) {
						this.followInProgress.splice(index, 1);
					}
				}
			},
			getAvatar(avatar) {
				if (!avatar) return '/static/default-avatar.png';
				if (avatar.startsWith('http')) return avatar;
				return config.baseUrl + config.apiPrefix + avatar;
			},
			goToUserTasks(fan) {
				uni.navigateTo({
					url: `/pages/user/user-tasks?userId=${fan.userId}&nickName=${encodeURIComponent(fan.nickName || '')}`
				})
			}
		}
	}
</script>

<style>
.container {
	padding: 20rpx;
}
.loading-tip, .empty-tip {
	text-align: center;
	color: #999;
	padding-top: 100rpx;
}
.fan-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}
.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.user-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.nickname {
	font-size: 32rpx;
	color: #333;
}
.signature {
	font-size: 24rpx;
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 350rpx;
}
.follow-btn {
	background-color: #409EFF;
	color: white;
	border: none;
	font-size: 24rpx;
	padding: 0 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
}
.follow-btn.is-mutual {
	background-color: #f0f0f0;
	color: #999;
	border: 1rpx solid #ddd;
}
</style> 